/* color palette from <https://github.com/vuejs/theme> */
:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f8f8f8;
    --vt-c-white-mute: #f2f2f2;

    --vt-c-black: #181818;
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;
    --vt-c-black-grey: #303030;

    --vt-c-black-alpha-3:rgba(0, 0, 0, 0.3);
    --vt-c-black-alpha-5:rgba(0, 0, 0, 0.5);
    --vt-c-black-alpha-7:rgba(0, 0, 0, 0.7);

    --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
    --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
    --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
    --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);

    --vt-c-text-light-1: #333;
    --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
    --vt-c-text-light-3: rgba(60, 60, 60, 0.48);
    --vt-c-text-light-4: rgba(60, 60, 60, 0.32);
    --vt-c-text-dark-1: #b8b8b8;
    --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
    --vt-c-text-dark-3: rgba(235, 235, 235, 0.48);
    --vt-c-text-dark-4: rgba(235, 235, 235, 0.32);
}

/* semantic color variables for this project */
:root {
    /* 通用全局变量 */
    --primary-color: $theme-color;

    --bg-color: white;

    --text-color: var(--vt-c-text-light-1);
    --text-color-soft: var(--vt-c-text-light-2);

    --divider-color: var(--vt-c-divider-light-1);

    --border-color: var(--vt-c-divider-light-1);

    /* header */
    --header-overlay-color: var( --vt-c-black-alpha-3);
    --header-text-color: var(--vt-c-white);

    /* card */
    --card-bg-color: var(--vt-c-white);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* 通用全局变量 */
        --primary-color:#49b1f5;

        --bg-color: var(--vt-c-black-mute);
        
        --text-color: var(--vt-c-text-dark-1);
        --text-color-soft: var(--vt-c-text-dark-4);

        --divider-color: var(--vt-c-divider-dark-1);

        --border-color: var(--vt-c-divider-dark-1);

        /* header */
        --header-overlay-color: var( --vt-c-black-alpha-5);
        --header-text-color: var(--vt-c-text-dark-1);

        /* card */
        --card-bg-color: var(--vt-c-black-grey);
    }
}